<template>
  <div>
    <div class="title"><image src="/static/back.svg" class="back" mode="widthFix" /></div>
    <div class="search_top">
      <image src="/static/search.svg" class="search_topbt" mode="widthFix" />
      <input class="search_topi" placeholder="搜索文章或杂志、作者">
    </div>

    <div class="search_nav">
      <span class="active">文章</span>
      <span>栏目</span>
      <span>作者</span>
    </div>

  
      <div class="search">
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
        <div class="search_box">
          <div class="search_btop">
          <image src="/static/Rectangle.jpg" mode="widthFix" />
          <span>报道 | 人物志</span>
          </div>
          <div class="search_f">
            <span>这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</span>
            <em>作者作者作者作者作者作者作者作者作者作者作者作者</em>
            <p>这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介这是简介</p>
          </div>
        </div>
      </div>


      <div class="no hide">
        暂无评论
        <p>来谈谈你的想法</p>
      </div>

      <div class="no hide">
        加载错误
        <p>不要慌，请再刷新试试</p>
      </div>

      <div class="wait hide">
        <image src="/static/furhter_logo 2.svg" mode="widthFix" />
      </div>


  </div>
</template>

<script>
export default {
  data () {
  },

  methods: {
  }
}
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.back{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }

.search_top{ width: 88%;height:30px; display: block; float:left;margin:75px 6% 8px; border-bottom:1px solid #000000; }
.search_topbt{display: block;margin:0 4px 0 0;width:24px;height: 24px;float: left;}
.search_topi{display: block;margin:0 4px 0 0;width:280px;height: 20px; line-height: 20px; font-size: 14px; line-height: 20px; color: #000000;float: left;}
.search_nav{width: 88%;height:48px; display: block; float:left;margin:5px 6% 0; }
.search_nav span{width:auto;height:22px; display: block; float:left;margin:14px 24px 0 0; line-height: 22px; font-size: 14px; font-weight: bold; color: #000000; border-bottom:#ffffff 2px solid;padding: 1px; position:relative; }
.search_nav span.active{ border-bottom-color: #F03838;}

.search{ width: 88%;height:auto; display: block; float:left;margin:20px 6% 30px; }
.search_box{ width: 151px;height:251px; display: block; float:left;margin:0 20px 30px 0; }
.search div.search_box:nth-child(even){ margin-right: 0px;}
.search_btop{ width: 100%;height:151px; display: block; float:left; position:relative; }
.search_btop image{ width: 100%;height:151px; display: block; float:left; position: absolute; top: 0; left: 0; z-index: 1; }
.search_btop span{ width: auto;height:20px; display: block; float:left; position: absolute; bottom: 0; left: 0; z-index: 2; background: rgba(34,34,34,.9); font-size: 10px; padding: 0 5px; line-height: 20px;color:#ffffff;}
.search_f{ width: 100%;height:auto; display: block; float:left;margin: 12px 0 0;}
.search_f{ width: 100%;height:auto; display: block; float:left;margin: 12px 0 0;}
.search_f span,.search_f p,.search_f em{width:100%;height:auto; display: block; float:left;}
.search_f span{ font-size: 14px;line-height: 20px; color: #000000; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.search_f em{ font-size: 12px; line-height: 17px; color:rgba(0,0,0,.4);  overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.search_f p{ font-size: 12px; line-height: 17px; height: 50px; color:rgba(0,0,0,.4); font-family: PingFang SC; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

.no{width: 100%; height: auto; display: block; float:left; text-align: center; font-size: 24px; line-height: 34px; color: rgba(0,0,0,.4); margin: 30px 0 20px;}
.no p{width: 100%; height: auto; display: block; float:left; font-size: 12px; line-height: 17px; color: rgba(0,0,0,.4); margin: 5px 0 0;}
.wait{width: 100%; height: auto; display: block; float:left; text-align: center;margin: 30px 0 20px; }
.wait image{width: 28px; height: auto; display: table; margin: auto;}
.hide{display: none;}
</style>